<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cui.css">
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./swiper/swiper-bundle.min.js"></script>

    <link rel="stylesheet" href="./css/header.css">
</head>

<body>
    <div class="box">
        <div class="statusBar"></div>
        <div class="header">
            <div class="fanhui">
                <img src="./images/返回.png" alt="">
            </div>
            <div class="title">商品详情</div>
        </div>
        <div class="row-a1">
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/SPA洗面奶.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/微信图片_20210803230317.png" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
            </div>
            <script>
                var mySwiper = new Swiper('.swiper', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })        
            </script>
        </div>
        <div class="row-a2">
            <div class="shangpinName">
                <div class="product">
                    <div class="top">
                        <div class="cuxiao">
                            <p>促销</p>
                        </div>
                        <span>莫次有机PWE活性美白洗面奶</span>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <p>￥169</p>
                            <p>￥220</p>
                        </div>
                        <div class="right">
                            买够200元包邮
                        </div>
                    </div>
                </div>
                <div class="format">
                    <div class="left">规格</div>
                    <div class="right">
                        <p>标准</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-a3">
            <ul class="list">
                <li>
                    <div class="tit">
                        <div>详情</div>
                    </div>
                </li>
                <li>
                    <div class="tit">
                        <div>评价</div>
                    </div>
                </li>
                <li>
                    <div class="tit">
                        <div>售后</div>
                    </div>
                </li>
            </ul>
            <div class="more">

            </div>
        </div>
        <div class="navigation">
            <div class="left">
                <div class="kefu">
                    <img src="./images/客服.png" alt="">
                    <p>客服</p>
                </div>
                <div class="shoucang">
                    <img src="./images/收藏.png" alt="">
                    <p>收藏</p>
                </div>
            </div>
            <div class="shopping">
                加入购物车
            </div>
            <div class="shop">
                立即购买
            </div>
        </div>
        <div class="Suspended">
            <img src="./images/购物车.png" alt="">
        </div>
    </div>
</body>

</html>